<template>
  <div>
    <el-dialog width="600px" :title="dialogTitle" :visible.sync="dialogVisible" @close="handleClose">
      <el-form
        ref="submitForm"
        v-loading="formLoading"
        :model="submitForm"
        label-width="80px"
        label-position="right"
        :rules="submitFormRules"
      >
        <el-form-item label="生产日期" prop="outputDate">
          <el-date-picker
            v-model="submitForm.outputDate"
            style="width: 100%"
            type="date"
            placeholder="请选择生产日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="排产编号" prop="produceId">
          <produce-query ref="produceQuery" v-model="submitForm.produceId" @choose="handleProduceClose" />
        </el-form-item>
        <el-descriptions v-if="produceInfo.id" :column="3" style="padding-left: 80px">
          <el-descriptions-item label="客户">
            {{ produceInfo.customerName }}
          </el-descriptions-item>
          <el-descriptions-item label="品名">
            {{ productInfo.moldName }}
          </el-descriptions-item>
          <el-descriptions-item label="颜色">
            {{ productInfo.color }}
          </el-descriptions-item>
          <el-descriptions-item label="材质">
            {{ productInfo.material }}
          </el-descriptions-item>
          <el-descriptions-item label="尺码">
            {{ productInfo.size }}
          </el-descriptions-item>
          <el-descriptions-item label="长度">
            {{ productInfo.length }}
          </el-descriptions-item>
          <el-descriptions-item label="总数" content-class-name="red">
            {{ produceInfo.quantity }}
          </el-descriptions-item>
          <el-descriptions-item label="余数" content-class-name="red">
            {{ produceInfo.remainingQuantity }}
          </el-descriptions-item>
        </el-descriptions>
        <el-form-item label="班次" prop="shiftId">
          <el-select v-model="submitForm.shiftId" style="width: 100%;" placeholder="请选择班次">
            <el-option
              v-for="item in shiftList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产量" prop="quantity">
          <el-input
            v-model="submitForm.quantity"
            placeholder="请输入产量"
            style="width: 100%;"
            type="number"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="formLoading" type="text" @click="handleClose">取消</el-button>
        <el-button :loading="formLoading" type="primary" @click="handleSubmit">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { selectOutputById, saveOutput, updateOutputById } from '@/api/erp/output'
import { selectProduceById } from '@/api/erp/produce'
import { selectAllShift } from '@/api/erp/shift'
import moment from 'moment'
import ProduceQuery from '@/components/query/ProduceQuery/ProduceQuery.vue'
/**
 * @author yizuomin
 * @date 2023/5/7 19:05
 **/
export default {
  name: 'SubmitOutputModule',
  components: { ProduceQuery },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      dialogTitle: '',
      formLoading: false,
      shiftList: [],
      produceInfo: {},
      productInfo: {},
      submitForm: {
        id: '',
        shiftId: '',
        produceNo: '',
        quantity: '',
        outputDate: moment().format('YYYY-MM-DD')
      },
      submitFormRules: {
        produceNo: [{ required: true, message: '请选择生产单号', trigger: 'change' }],
        shiftId: [{ required: true, message: '请选择班次', trigger: 'change' }],
        quantity: [{ required: true, message: '请输入产量', trigger: 'change' }],
        outputDate: [{ required: true, message: '请选择日期', trigger: 'change' }]
      }
    }
  },
  methods: {
    init(id) {
      this.selectAllShift()
      if (!id) {
        this.dialogTitle = '生产登记'
        return
      }
      this.dialogTitle = '修改产量'
      this.formLoading = true
      selectOutputById(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
          this.initProduce(resp.data.produceId)
        }
      }).finally(() => {
        this.formLoading = false
      })
    },
    initProduce(produceId) {
      this.formLoading = true
      selectProduceById(produceId).then(r => {
        if (r.success) {
          this.produceInfo = r.data
          this.productInfo = r.data.productInfo
          this.$refs.produceQuery.init(this.produceInfo.produceNo)
        }
      }).finally(() => {
        this.formLoading = false
      })
    },
    selectAllShift() {
      this.formLoading = true
      selectAllShift().then(resp => {
        if (resp.success) {
          this.shiftList = resp.data
        }
      }).finally(() => {
        this.formLoading = false
      })
    },
    handleSubmit() {
      this.$refs.submitForm.validate((valid) => {
        if (valid) {
          this.registration()
        }
      })
    },
    registration() {
      this.formLoading = true
      let request = saveOutput
      if (this.submitForm.id) {
        request = updateOutputById
      }
      request(this.submitForm).then(res => {
        if (res.success) {
          this.$message.success('登记成功')
          this.$refs.submitForm.resetFields()
          this.handleClose()
        }
      }).finally(() => {
        this.formLoading = false
      })
    },
    handleClose() {
      this.submitForm.quantity = ''
      this.$emit('close')
    },
    handleProduceClose(row) {
      if (row) {
        this.submitForm.produceNo = row.produceNo
        this.submitForm.produceId = row.id
        this.produceInfo = row
        this.productInfo = row.productInfo
      }
    }
  }
}
</script>

<style scoped>

</style>
